<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>{$shopData['name']} - 登录</title>
    <link rel="stylesheet" type="text/css" href="/static/shop/css/register-login.css">
    <link rel="stylesheet" href="/static/shop/css/layer.css" id="layui_layer_skinlayercss" style="">
</head>
<body>
<!--<div id="box"><canvas class="particles-js-canvas-el" width="1452" height="929" style="width: 100%; height: 100%;"></canvas></div>-->
<div class="cent-box">
    <div class="cent-box-header">
        <h2 class="sub-title">{$shopData['name']}</h2>
    </div>

    <div class="cont-main clearfix">
        <div class="index-tab">
            <div class="index-slide-nav">
                <a href="javascript:;" id="login-bot">登录</a>
                <a href="javascript:;" id="register-bot" class="active">注册</a>
                <div class="slide-bar"></div>
            </div>
        </div>

        <div class="login form" id="login-form">
            <div class="group">
                <div class="group-ipt email">
                    <input type="text" name="lo-mobile" class="ipt" placeholder="手机号" required="">
                </div>
                <div class="group-ipt password">
                    <input type="password" name="lo-password" class="ipt" placeholder="输入您的登录密码" required="">
                </div>
                <!--                <div class="group-ipt verify">-->
                <!--                    <input type="text" name="verify" class="ipt" placeholder="输入验证码" required="">-->
                <!--                    &lt;!&ndash;                    <img src="http://zrong.me/home/index/imgcode?id=" class="imgcode">&ndash;&gt;-->
                <!--                </div>-->
            </div>
            <div class="button">
                <button type="submit" class="login-btn register-btn" id="lo-button">登录</button>
            </div>
        </div>


        <div class="login form" id="register-form" style="display: none">
            <div class="group">
                <div class="group-ipt">
                    <input type="text" name="re-user" class="ipt" placeholder="输入您的昵称" required="">
                </div>
                <div class="group-ipt mobile">
                    <input type="email" name="re-mobile" class="ipt" placeholder="手机号" required="">
                </div>

                <div class="group-ipt password">
                    <input type="password" name="re-password" class="ipt" placeholder="设置登录密码" required="">
                </div>
                <div class="group-ipt password1">
                    <input type="password" name="re-password1" class="ipt" placeholder="重复密码" required="">
                </div>
                <!--                <div class="group-ipt verify">-->
                <!--                    <input type="text" name="re-verify" id="verify" class="ipt" placeholder="输入验证码" required="">-->
                <!--                    &lt;!&ndash;                    <img src="http://zrong.me/home/index/imgcode?id=" class="imgcode">&ndash;&gt;-->
                <!--                </div>-->
            </div>
            <div class="button">
                <button type="button" class="login-btn register-btn" id="re-button">注册</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/shop/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="/static/shop/js/layer.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#login-bot').attr('class', 'active');
    $('#register-bot').click(function () {
        $('#login-bot').attr('class', '');
        $('#register-bot').attr('class', 'active');
        $('.slide-bar').attr('class', 'slide-bar slide-bar1');
        $('#login-form').hide();
        $('#register-form').show();
    });
    $('#login-bot').click(function () {
        $('#login-bot').attr('class', 'active');
        $('#register-bot').attr('class', '');
        $('.slide-bar').attr('class', 'slide-bar');
        $('#login-form').show();
        $('#register-form').hide();
    });

    $('#lo-button').click(function () {
        let index = parent.layer.getFrameIndex(window.name),
            mobile = $('input[name="lo-mobile"]').val(),
            password = $('input[name="lo-password"]').val();
        if (mobile.length !== 11) {
            layer.msg('手机号错误');
            return false;
        }
        if (password.length <= 5) {
            layer.msg('密码格式错误');
            return false;
        }
        $.ajax({
            'type': 'post',
            'data': {mobile: mobile, password: password},
            'url': '/shop/userLogin',
            success: function (res) {
                if (res.code === 0) {
                    parent.$("#handle_status").val('1');
                    parent.layer.close(index);
                } else {
                    layer.msg(res.message);
                }
            }
        });
    });
    $('#re-button').click(function () {
        let index = parent.layer.getFrameIndex(window.name),
            username = $('input[name="re-user"]').val(),
            mobile = $('input[name="re-mobile"]').val(),
            password = $('input[name="re-password"]').val(),
            password1 = $('input[name="re-password1"]').val();
        if (username.length <= 1) {
            layer.msg('请输入您的昵称');
            return false;
        }
        if (mobile.length !== 11) {
            layer.msg('手机号错误');
            return false;
        }
        if (password.length <= 5) {
            layer.msg('密码至少6个字符');
            return false;
        }
        if (password !== password1) {
            layer.msg('两次输入密码不一致');
            return false;
        }
        $.ajax({
            'type': 'post',
            'data': {username: username, mobile: mobile, password: password, password1: password1},
            'url': '/shop/userRegister',
            success: function (res) {
                if (res.code === 0) {
                    parent.$("#handle_status").val('2');
                    parent.layer.close(index);
                } else {
                    layer.msg(res.message);
                }
            }
        });
    });
</script>

</body>
</html>